<template>
  <div class="aui-wrapper aui-page__password">
    <div class="aui-content__wrapper">
      <div class="aui-content">
        <el-dialog :visible.sync="visible" :title="$t('updatePassword.title')" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="showCancelButton" :append-to-body="true">
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
            <el-form-item prop="username" :label="$t('login.username')">
              <el-input v-model="dataForm.username" :placeholder="$t('login.username')" @change="getInfo">
              </el-input>
            </el-form-item>
            <el-form-item prop="password" :label="$t('updatePassword.password')">
              <el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input>
            </el-form-item>
            <el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')" :show-message="!valid_password">
              <el-input v-model="dataForm.newPassword" type="password" @input="p_len" :placeholder="$t('updatePassword.newPassword')"></el-input>
              <span v-bind:class="{ show_password_length: typed, pwd_level1:pwdLevel===1, pwd_level2:pwdLevel===2, pwd_level3:pwdLevel===3, pwd_level4:pwdLevel===4}" class="password_length">{{pwdLevel===1?$t('updatePassword.pwdLevel1'):pwdLevel===2?$t('updatePassword.pwdLevel2'):pwdLevel===3?$t('updatePassword.pwdLevel3'):$t('updatePassword.pwdLevel4')}}</span>
              <div class="lnu_container">
                <p v-bind:class="{ number_valid: contains_number }">{{$t('updatePassword.number')}}</p>
                <p v-bind:class="{ lovercase_valid: contains_lovercase }">{{$t('updatePassword.lovercase')}}</p>
                <p v-bind:class="{ uppercase_valid: contains_uppercase }">{{$t('updatePassword.uppercase')}}</p>
                <p v-bind:class="{ special_valid: contains_special }">{{$t('updatePassword.special')}}</p>
              </div>
            </el-form-item>
            <el-form-item prop="comfirmPassword" :label="$t('updatePassword.comfirmPassword')">
              <el-input v-model="dataForm.comfirmPassword" type="password" :placeholder="$t('updatePassword.comfirmPassword')"></el-input>
            </el-form-item>
          </el-form>
          <template slot="footer">
            <el-button v-if="showCancelButton" @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import password from '@/mixins/view-password'
import httpm from '@/utils/requestm'
import URLUtil from '@/utils/url'
export default {
  mixins: [password],
  data () {
    return {
      returnUrl: '',
      appId: '',
      token: '' // ,
      // dataForm: {
      //   username: 'yangjian',
      //   password: 'admin',
      //   newPassword: 'qq11111111,',
      //   comfirmPassword: 'qq11111111,'
      // }
    }
  },
  created () {
    // 读取url?后参数
    let params = URLUtil.getURLParams()
    this.returnUrl = params.returnUrl
    this.appId = params.appId
    this.token = params.token
  },
  mounted () {
    console.log('this', this)
    this.openShake().then(() => {
      this.init()
    }, () => { })
  },
  methods: {
    config () {
      return { headers: { token: this.token } }
    },
    openShake () {
      return new Promise((resolve, reject) => {
        let msg = {
          message: 'token无效！',
          type: 'error',
          duration: 30000,
          onClose: () => { }
        }
        if (!this.token) {
          this.$message(msg)
          reject(new Error(false))
        } else {
          httpm.get('/open/api/shake', this.config()).then(({ data: res }) => {
            if (res.code !== 0) {
              this.$message(msg)
              reject(new Error(false))
            }
            resolve(true)
          })
        }
      })
    },
    // 获取信息
    getInfo () {
      httpm.get(`/sys/appConfig/pwdSecurityLevel`, this.config()).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message(res.msg)
          return
        }
        this.pwdSecurityLevel = res.data.pwdSecurityLevel
      }).catch(() => { })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        httpm.put('/user/center/password', this.dataForm, this.config()).then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message(res.msg)
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 3000,
            onClose: () => {
              // 重定向
              let url = this.returnUrl
              if (url) {
                url = URLUtil.urlMakeToken(url, this.token)
                location.href = url
              }
            }
          })
        }).catch(() => { })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style scoped>
.password_length {
  padding: 2px 10px;
  line-height: 20px;
  position: absolute;
  top: 25%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #fbd490;
  color: rgba(71, 87, 98, 0.8);
  border-radius: 4px;
  font-size: 13px;
  display: none;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.valid_password_length {
  background: #00ad7c;
  color: rgba(255, 255, 255, 0.9);
}

.pwd_level1,
.pwd_level2 {
  background: #f56c6c;
  color: rgba(255, 255, 255, 0.9);
}

.pwd_level3 {
  background: #e6a23c;
  color: rgba(255, 255, 255, 0.9);
}

.pwd_level4 {
  background: #5cb85c;
  color: rgba(255, 255, 255, 0.9);
}

.show_password_length {
  display: block;
}

.lnu_container {
  width: 420px;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.lnu_container p {
  width: 100px;
  height: auto;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  color: rgba(71, 87, 98, 0.8);
  background: -webkit-linear-gradient(left, #00ad7c 50%, #eee 50%);
  background: linear-gradient(to right, #00ad7c 50%, #eee 50%);
  background-size: 201% 100%;
  background-position: right;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.lovercase_valid,
.number_valid,
.uppercase_valid,
.special_valid {
  background-position: left !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.valid_password_container {
  display: block;
  margin: 10px auto;
  border-radius: 4px;
  position: relative;
  background: #00ad7c;
  width: 20px;
  height: 20px;
  visibility: hidden;
  opacity: 0;
}
</style>
